<template>
  <div class="flex flex-col gap-4">
    <a-tabs type="card">
      <a-tab-pane key="0" tab="沙箱测试">
        <div class="flex gap-4">
          <a-button @click="setWindowProperty">基座-设置 window.testData = 1</a-button>
          <a-button @click="getWindowProperty">基座-子应用是否可以修改基座的全局变量</a-button>
          <a-button @click="getChildGlobalPropertyCount">获取子应用新增全局属性 count</a-button>
        </div>
      </a-tab-pane>
      <a-tab-pane key="1" tab="测试样式">
        <Typography>
          <Typography.Title :level="3">测试样式</Typography.Title>
          <Typography.Title :level="4">
            基本样式，给相同的div设置相同的class与样式，检测是否冲突
          </Typography.Title>
          <div class="style-box-1">背景色为绿色</div>
          <Typography.Title :level="4">
            文字设置样式，子应用不设置，但使用相同的类型，颜色为红色
          </Typography.Title>
          <span class="style-text-1">我是一段文字</span>
          <Typography.Title :level="4"> 设置body与html的样式 </Typography.Title>
        </Typography>
      </a-tab-pane>
      <a-tab-pane key="2" tab="元素隔离">
        <Typography>
          <Typography.Title :level="3">元素隔离</Typography.Title>
          <Typography.Title :level="4">ant-design UI测试</Typography.Title>
          <a-button @click="modalVisible = true">弹出modal</a-button>
          <a-modal v-model:visible="modalVisible" title="Basic Modal" @ok="modalVisible = false">
            <p>Some contents...</p>
            <p>Some contents...</p>
            <p>Some contents...</p>
          </a-modal>
          <div class="test-class-tag-el">基座节点 class</div>
          <div id="test-id-tag-el">基座节点 id</div>
        </Typography>
      </a-tab-pane>
      <a-tab-pane key="3" tab="元素隔离">
        <Typography>
          <Typography.Title :level="3">路由</Typography.Title>
          <Typography.Title :level="4">基座中存在路由监听与子应用中存在路由监听</Typography.Title>
          父：
          <code> router.beforeEach(() => console.log('基座路由监听发生变化')); </code>
          <br />
          子：<code> router.beforeEach(() => console.log('基座路由监听发生变化')); </code>
          <div class="flex gap-3 mt-3">
            <a-button @click="$router.push('/')">跳转到主-/ $router.push('/')</a-button>
            <a-button @click="goAbout">跳转到基座的about页面【pushState】</a-button>
          </div>
          <blockquote>
            经测试发现：当给基座与子应用设置路由的监听函数后，从调用时机来看，当通过命令式与router-link发生跳转时，均不会造成基座与子应用两者路由监听冲突重复的情况下，也就是说，当在子应用中发生路由跳转时，仅触发子应用的路由监听函数，而不触发基座设置的路由监听函数，两者的router实例是不一致的，互不影响。
          </blockquote>
          <blockquote>
            但是当通过点击浏览器的前进与退后时，触发的是浏览器行为，基座的路由监听与子应用的路由监听均会被触发，其实这也是符合预期的，因为当我们触发浏览器的路由行为时，触发了浏览器的popState事件，其VueRouter底层也是监听了popState事件被触发后作出相应的操作，由于基座与子应用都是vue-router（亦或者其他框架其底层在处理路由变化时也是基于这个api）popState时间被触发，两者都会监听到，所以两者设置的beforeEach函数都会被触发
          </blockquote>
          <Typography.Title :level="4">通过通信的方式跳转路由</Typography.Title>
          <div class="flex gap-3">
            <a-button @click="handleNavigatorToV3Home">跳转到subapp-vue3 - home</a-button>
            <a-button @click="handleNavigatorToV3About">跳转到subapp-vue3 - about</a-button>
          </div>
        </Typography>
      </a-tab-pane>
    </a-tabs>

    <a-divider class="!my-8">分割线</a-divider>
  </div>
</template>

<script setup>
  import { Typography, message } from 'ant-design-vue';
  import { ref } from 'vue';

  function logInfo() {
    message.info('打开控制台查看输出结果');
  }

  function setWindowProperty() {
    window.testData = 1;
    message.success('设置成功');
  }

  function getWindowProperty() {
    console.log('基座获取 window.testData', window.testData);
    logInfo();
  }

  function getChildGlobalPropertyCount() {
    console.log('获取子应用设置 window.count', window.count);
    logInfo();
  }

  const modalVisible = ref(false);

  function goAbout() {
    const base = window.location.origin + '/about';

    // 只调用它只会更改url 不会触发对应的popstate事件，更新后的路径符合预期
    window.history.pushState(null, null, base);

    // 当同时修改完路径后，进行事件派发，发现，location.pathname 始终会拼接上在创建router是createWebHistory函数传入的url，导致切换到主应用的路由时不符合预期，结果显示切换的路由都是发生在子应用下的
    window.dispatchEvent(new PopStateEvent('popstate', { state: null }));
  }

  function handleNavigatorToV3Home() {}
  function handleNavigatorToV3About() {}
</script>

<style lang="less">
  .style-box-1 {
    color: #fff;
    background-color: green;
  }
  .style-text-1 {
    color: red;
  }
  /* 哈哈11 */
</style>
